<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>干燥管理</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link href="../static/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../static/css/font-awesome.min.css" rel="stylesheet" />
		<!-- bootstrap-table 表格插件样式 -->
		<link href="../static/ajax/libs/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
		<link href="../static/css/animate.css" rel="stylesheet" />
		<link href="../static/css/style.css" rel="stylesheet" />
		<link href="../static/ruoyi/css/ry-ui.css" rel="stylesheet" />


		<link href="../static/ajax/libs/jquery-layout/jquery.layout-latest.css" rel="stylesheet" />
		<style>
			.echarts{
				height: 300px !important;
			}

		</style>

	</head>
	<body class="gray-bg">

		<div class="container-div">

			<div class="row">
				<div class="col-sm-12">

					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<div class="pull-left">
								<h5>XX生产线 xxx步骤 xxx机器 实时数据</h5>
							</div>
							<div class="pull-right btn-group btn-group-sm" role="group">
								<button class="btn btn-danger" type="button">急停</button>
								<button class="btn btn-info" type="button">联机</button>
								<button class="btn btn-danger" type="button">断开</button>
							</div>
						</div>
						<div class="ibox-content">

							<div class="row">
								<div class="col-sm-8">
									<div class="echarts" id="gz">

									</div>
									<div class="echarts" id="gz2">

									</div>
								</div>
								<div class="col-sm-4">

									<div class="panel panel-info">
										<div class="panel-heading">
											参数标准
										</div>
										<div class="panel-body">

											<div class="row">
												<div class="col-sm-6 b-r">

													<div class="form-group">
														<label>温度:</label>
														<label>12</label>
													</div>
													<div class="form-group">
														<label>含水量:</label>
														<label>30%-40%</label>
													</div>

												</div>
												<div class="col-sm-6">

													<div class="form-group">
														<label>风扇转速:</label>
														<label>12</label>
													</div>
													<div class="form-group">
														<label>设备转速:</label>
														<label>30%-40%</label>
													</div>

												</div>
											</div>

										</div>

									</div>

									<div class="panel panel-danger">
										<div class="panel-heading">
											参数调整
										</div>
										<div class="panel-body">

											<div class="row">
												<div class="col-sm-6 b-r">

													<div class="form-group">
														<label>温度</label>
														<input type="text" class="form-control">
													</div>
													<div class="form-group">
														<label>含水量</label>
														<input type="text" class="form-control">
													</div>

												</div>
												<div class="col-sm-6">

													<div class="form-group">
														<label>风扇转速</label>
														<input type="text" class="form-control">
													</div>
													<div class="form-group">
														<label>设备转速</label>
														<input type="text" class="form-control">
													</div>

												</div>
											</div>


										</div>

									</div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../static/js/jquery.min.js"></script>
		<script src="../static/js/bootstrap.min.js"></script>
		<!-- bootstrap-table 表格插件 -->
		<script src="../static/ajax/libs/bootstrap-table/bootstrap-table.min.js"></script>
		<script src="../static/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="../static/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js"></script>
		<script src="../static/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
		<script src="../static/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js"></script>
		<!-- jquery-validate 表单验证插件 -->
		<script src="../static/ajax/libs/validate/jquery.validate.min.js"></script>
		<script src="../static/ajax/libs/validate/messages_zh.min.js"></script>
		<script src="../static/ajax/libs/validate/jquery.validate.extend.js"></script>
		<!-- jquery-validate 表单树插件 -->
		<script src="../static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>

		<!-- 遮罩层 -->
		<script src="../static/ajax/libs/blockUI/jquery.blockUI.js"></script>
		<script src="../static/ajax/libs/iCheck/icheck.min.js"></script>
		<script src="../static/ajax/libs/layer/layer.min.js"></script>
		<script src="../static/ajax/libs/layui/layui.js"></script>
		<script src="../static/ruoyi/js/common.js?v=4.0.0"></script>
		<script src="../static/ruoyi/js/ry-ui.js?v=4.0.0"></script>

		<!--Echarts -->
		<script src="../static/ajax/libs/report/echarts/echarts-all.js"></script>
		<script src="../static/ruoyi/controller.js"></script>

		<script src="../static/ajax/libs/jquery-layout/jquery.layout-latest.js"></script>

		<script>
            /**
             * 干燥数据：滚筒转速和风扇转速
             */
            // 基于准备好的dom，初始化echarts实例
            let dryChart = echarts.init(document.getElementById("gz"));  //根据ID获取chart

			let time = $.echarts.time;

            let dryoption = $.echarts.getDoubleLineOption("干燥实时数据",['滚筒转速 rpm', '风扇转速 rpm']); //得到option

            $.echarts.setChartInterval(dry,time);  //开启定时器，执行指定函数f

            /**
             * 进行数据模拟函数，并将数据动态写入指定的option
             */
            function dry() {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                let data_1 = Math.round(Math.random() * 100);
                let data_2 = Math.round(Math.random() * 20);

                dryoption = $.echarts.setDynamicData(dryoption,axisData,data_1,data_2);

                dryChart.setOption(dryoption);
            }
            /**
             * 干燥数据：温度
             */
                // 基于准备好的dom，初始化echarts实例
            let dryChart2 = echarts.init(document.getElementById("gz2"));  //根据ID获取chart

            let dryoption2 = $.echarts.getDoubleLineOption("",['温度 \'C', '含水量 %']); //得到option

            $.echarts.setChartInterval(dry2,time);  //开启定时器，执行指定函数f

            /**
             * 进行数据模拟函数，并将数据动态写入指定的option
             */
            function dry2() {
                let axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

                let data_1 = Math.round(Math.random() * 100);
                let data_2 = Math.round(Math.random() * 20);

                dryoption2 = $.echarts.setDynamicData(dryoption2,axisData,data_1,data_2);

                dryChart2.setOption(dryoption2);
            }
		</script>

	</body>
</html>
